<script setup>
import RenderTitle from './widgets/title.vue'
import RenderText from './widgets/text.vue'
import RenderDivider from './widgets/divider.vue'
// import RenderDatePicker from './widgets/date-picker.vue'
import RenderRow from './widgets/row.vue'
import RenderLabel from './widgets/label.vue'

// import RenderText from './widget/text.vue'
// import RenderDivider from './widget/divider.vue'
// import RenderInput from './widget/input.vue'
// import RenderRadio from './widget/radio.vue'
// import RenderCheckbox from './widget/checkbox.vue'
// import RenderSelect from './widget/select.vue'

const field = defineModel('field')

// 表格外能显示的组件
const componentMap = {
  text: RenderText,
  divider: RenderDivider,
  title: RenderTitle,
  row: RenderRow,
  label: RenderLabel,
  // datePicker: RenderDatePicker,
}

const noWrapItems = ['text', 'divider', 'title']

const componentRender = componentMap[field.value.type]

defineOptions({ name: 'RenderItem' })
</script>

<template>
  <component :is="componentRender" v-bind="field.props" v-model:field="field" />
</template>
